<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh" data-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="<c:url value='/assets/css/tailwind.output.css'/>">
    <link rel="stylesheet" href="<c:url value='/assets/css/toastr.min.css'/>">
    <script type="text/javascript" src="<c:url value='/assets/js/http/axios_client.js'/>"></script>
    <script type="text/javascript" src="<c:url value='/assets/js/admin/admin_kanban.js'/>"></script>
    <script type="text/javascript" src="<c:url value='/assets/js/echarts.min.js'/>"></script>
    <script type="text/javascript" src="<c:url value='/assets/js/axios.min.js'/>"></script>
    <script type="text/javascript" src="<c:url value='/assets/js/jquery-3.6.0.min.js'/>"></script>
    <script type="text/javascript" src="<c:url value='/assets/js/toastr.min.js'/>"></script>
    <title>登录页面</title>
</head>
<body>
<!-- Placeholder for Navigation -->
<div class="h-16 bg-base-200">
    <jsp:include page="/include/web_header.jsp" flush="true"/>
</div>

<!-- Main Content -->
<div class="min-h-[calc(100vh-64px)] relative flex items-center justify-center">
    <!-- Background Image with Overlay -->
    <div class="absolute inset-0 z-0">
        <div class="absolute inset-0 bg-black/60 backdrop-blur-sm"></div>
        <div class="grid grid-cols-6 md:grid-cols-8 lg:grid-cols-12 gap-2 p-4 absolute inset-0">
            <!-- Movie Poster Grid Background -->
            <div class="aspect-[2/3] bg-gray-800 rounded-lg"></div>
            <div class="aspect-[2/3] bg-gray-800 rounded-lg"></div>
            <div class="aspect-[2/3] bg-gray-800 rounded-lg"></div>
            <div class="aspect-[2/3] bg-gray-800 rounded-lg hidden md:block"></div>
            <div class="aspect-[2/3] bg-gray-800 rounded-lg hidden lg:block"></div>
            <div class="aspect-[2/3] bg-gray-800 rounded-lg hidden lg:block"></div>
            <!-- Repeat for multiple rows -->
        </div>
    </div>

    <!-- Login Card -->
    <div class="card w-full max-w-sm bg-base-100/80 backdrop-blur-md shadow-xl z-10">
        <div class="card-body">
            <!-- Logo -->
            <div class="flex justify-center mb-4">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-primary" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="12" r="10"/>
                    <polygon points="10 8 16 12 10 16 10 8"/>
                </svg>
            </div>

            <h2 class="card-title text-2xl font-bold text-center justify-center mb-4">登录账号</h2>

            <form>
                <div class="form-control">
                    <input type="text" placeholder="请输入您的登录账号" class="input input-bordered bg-base-200/50"
                           required/>
                </div>

                <div class="form-control mt-4">
                    <input type="password" placeholder="请输入您的登录密码" class="input input-bordered bg-base-200/50"
                           required/>
                </div>

                <div class="flex justify-between mt-2 text-sm">
                    <label class="cursor-pointer label">
                        <input type="checkbox" class="checkbox checkbox-sm checkbox-primary"/>
                        <span class="label-text ml-2">记住密码</span>
                    </label>
                    <a href="#" class="link link-hover">忘记密码？</a>
                </div>

                <div class="form-control mt-6">
                    <button class="btn btn-primary">登录</button>
                </div>
            </form>

            <div class="divider">或者</div>

            <div class="text-center">
                <a href="/register" class="link link-hover">注册账号</a>
            </div>
        </div>
    </div>
</div>
<%-- 脚注 --%>
<jsp:include page="/include/hover_theme_controller.jsp"/>
</body>
</html>